.button {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0;
  color: #fff;
  border: 1px solid transparent;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 3px;
  transition: padding 0.05s ease-in-out;
  font-weight: 700;
  user-select: none;

  @include button-size(14px, 32px, 14px);
  @include button-style($color-primary-500, $color-primary-600);

  &:hover,
  &:focus {
    text-decoration: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
  }
}

.button--large {
  @include button-size(15px, 44px, 28px);
}

.button--success {
  @include button-style($color-success-500, $color-success-600);
}

.button--warning {
  @include button-style($color-warning-500, $color-warning-600);
}

.button--error {
  @include button-style($color-error-500, $color-error-600);
}

.button--ghost {
  @include button-style($white, $color-neutral-100, $color-primary-900);

  border-color: $color-neutral-400;
}

.button__icon {
  margin: 0 2px;

  &.button--large {
    margin: 0 3px;
  }
}

.button--loading {
  position: relative;
  cursor: wait;
  user-select: none;

  &:hover,
  &:focus {
    box-shadow: none;
  }

  &::after {
    content: " ";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -0.7em;
    display: block;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    border: 0.25em solid;
    border-color: #fff transparent #fff transparent;
    animation: spin infinite 1800ms;
    animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
}

.button--overflow {
  @extend %ellipsis;

  display: block;
}
